<template>
    <div class='like'>
        <Card class="card">
            <span>猜你喜欢</span>
        </Card>
        <div class="swiper" ref="swiper">
            <ul>
                <li v-for='(item,index) in likeList' :key='index' @click='goDetail(item.id)'>
                    <h2>
                        <img v-lazy="item.imgUrl" alt="">
                    </h2>
                    <h3>{{item.name}}</h3>
                    <div>
                        <span>¥</span>
                        <b>{{item.price}}</b>
                    </div>
                </li>
            </ul>
            <div v-if="showLoding" class="loading">
                正在加载中。。。
            </div>
        </div>
    </div>
</template>

<script>
import Card from '@/components/home/Card.vue'
import { getLikeList } from '@/common/api/index.js'
import BetterScroll from 'better-scroll'
export default {
    data () {
        return {
            scroll: '',
            likeList: [],
            pageIndex: 1,
            showLoding: false
        }
    },
    components: {
        Card
    },
    mounted () {

    },
    methods: {
        getData (page = 1) {
            getLikeList(page).then(res => {
                console.log(...this.likeList);
                console.log(res);
                console.log([...this.likeList, ...res.data]);
            })
        },

    }
}
</script>

<style scoped>
.like {
    height: 700px;
}
.card {
    height: 30px;
}

.swiper {
    height: 670px;
    overflow: hidden;
}

.swiper ul {
    display: flex;
    flex-wrap: wrap;
    background: #f0f0f0;
}
.swiper li {
    /* height: 40px;s */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 47%;
    background: #ffffff;
}
.swiper li:nth-child(odd) {
    margin-top: 10px;
    margin-left: 8px;
}
.swiper ul li:nth-child(even) {
    margin-top: 10px;
    margin-left: 10px;
}
.swiper h3 {
    padding: 0 0.16rem;
    width: 93%;
    font-size: 0.373333rem;
    font-weight: 400;
    color: #222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.swiper li > div {
    width: 93%;
    padding: 0.16rem;
    text-align: left;
    color: #ff0000;
}
.swiper li > div span {
    font-size: 0.32rem;
}
.swiper li > div b {
    font-weight: 600;
    font-size: 0.426666rem;
}
.like img {
    width: 4.693333rem;
    height: 4.693333rem;
}
.like img[lazy="loading"] {
    background-color: #f7f7f7;
}
.loading {
    width: 100vw;
    height: 20px;
    background: red;
    font-size: 20px;
}
</style>
